import React, {FC, ReactElement, useEffect, useState} from "react";
import styles from "./index.less"

export interface HomeAnimationProps {
    children: ReactElement,
    openDoorTime: number
}

const HomeAnimation: FC<HomeAnimationProps> = (props) => {
    const [openLeftDoor, setOpenLeftDoor] = useState<string>("")
    const [openRightDoor, setOpenRightDoor] = useState<string>("")
    const [propsShowOrHidden, setPropsShowOrHidden] = useState<boolean>(false)
    const newNode = React.cloneElement(props.children, {className: `${props.children.props.className} ${styles['content']}`})
    useEffect(() => {
        setTimeout(() => {
            setOpenLeftDoor("open-left-door");
            setOpenRightDoor("open-right-door");
        }, props.openDoorTime)
    }, []);
    useEffect(() => {
        setTimeout(() => {
            setPropsShowOrHidden(true)
        }, props.openDoorTime + 400)
    }, []);
    return (
        <>
            {propsShowOrHidden ? newNode : <div className={`${styles["container"]}`}>
                <div className={`${styles["door"]} ${styles[openLeftDoor]}`}></div>
                <div className={`${styles["door"]} ${styles[openRightDoor]}`}></div>
            </div>}
        </>
    )
}
export default HomeAnimation;